<!--图片管理页面-->
<template>


<div>

<!--左侧选择条-->

      <el-tabs tab-position="left" type="border-card" style="height: 500px" class="demo-tabs">
        <el-tab-pane v-for="item in HomeArr" :label="item.houseId">
          <el-row :gutter="10">
            <el-col :span="24">
              <div style="float: left;margin: 10px;">
                <!--上传图片，需要结合load后端接口进行上传，此时并未设置相应的函数-->
                <el-button type="warning"@click="dialogVisible=true;openDialog(item)" ><el-icon><Plus /></el-icon>上传图片</el-button>
              </div>
            </el-col>
          </el-row>

          {{item.houseType}}
          <!--图片部分先隐藏-->

          <el-row :gutter="10">
            <el-col :span="4" v-if="item.houseImg!=null" v-for="url in item.houseImg.split(',')">
              <el-card style="margin-top: 6px;">
                <div style="float: right">
                  <el-button type="danger" :icon="Close" circle size="small" @click="del(item.id,url)" />
                </div>
                <div>
                  <img :src="BASE_URL+url" style="width: 100%;">
                </div>
                <div>
                  <span>{{item.houseType}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>




</div>
  <div style="margin-top: 10px;">
    <el-row :gutter="10">
     <el-col :span="4"></el-col>
     <el-col :span="4"></el-col>
      <el-col :span="16">
        <!--分页器
      @size-change和@current-change=>处理页码大小和当前页变动时候触发的事件,
:current-page=>当前第几页
:page-sizes=>每页显示多少条数据的选择项
:page-size=>每页显示多少条数据
layout=>页码布局(一下是完整版)
:total=>数据总数
-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            style="margin-top: 10px;">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
<!--上传图片的蒙版弹窗-->
  <el-dialog v-model="dialogVisible" align-center style="padding: 30px;">
    <!--头像上传开始-->
    <el-upload
        v-model:file-list="fileList"
        :action="BASE_URL+'/picture/upload'"
        name="file"
        limit="9"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
    >

      <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisibleUpload">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
    <!--头像上传结束-->
    <el-button type="primary" @click="post(currentItem.id)" style="margin-top: 10px;">上传</el-button>
  </el-dialog>
</template>

<script setup>
import {
  Close,
} from '@element-plus/icons-vue'
import {onBeforeUpdate, onMounted, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
//新增禁忌词的蒙版弹窗是否可见
const dialogVisible=ref(false);

const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisibleUpload = ref(false)
const currentItem=ref();
//*****************************************图片上传****************************************
const openDialog=(i)=>{
  currentItem.value=i;

}
//在上传阶段将图片删除
const handleRemove = (uploadFile, uploadFiles) => {

  console.log(uploadFile, uploadFiles)
  let imgUrl=uploadFile.response.data;
  axios.post('http://localhost:8081/picture/remove?imgUrl='+imgUrl)
  .then((response)=>{
    if (response.data.code==2001){
      ElMessage.success('图片删除成功！');
    }
  })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisibleUpload.value = true
}
//将图片存入数据库中
const post=(id)=>{
  console.log(id);
  if(fileList.value.length>0){//>0说明用户传图片了
    let houseImg = [];//准备空数组,用来存多个图片路径
    for(let file of fileList.value){//遍历响应式变量数组fileList
      let imgUrl = file.response.data;//依次得到每张图片路径,放入imgUrl变量中
      houseImg.push(imgUrl);//将每个图片路径变量,存入图片数组中
    }
    let data=qs.stringify({id:id,houseImg:houseImg.toString()});
    axios.post(BASE_URL+'/verification/add-picture',data)
    .then((response)=>{
      if (response.data.code==2001){
        //添加成功关闭蒙版弹窗
        dialogVisible.value=false;
        ElMessage.success("上传成功");
        fileList.value = [];
        loadData();
      }else {
        ElMessage.error(response.data.msg);
      }
    })

  }else {
    ElMessage.warning("请选择图片");
  }
}
//*****************************************图片上传****************************************
//房屋列表,id,type,picture
const HomeArr=ref([]);
//**********************************一进页面就加载******************************************************************
onMounted(()=>{
  //加载初始分页数据
  loadData();
})

//*************************************分页相关*****************************************
const totalPage=ref();
//图片数组,需要id
const pictureArr=ref([])
const currentPage=ref(1);
const pageSize=ref(5);


// @size-change页码展示数量点击事件
const handleSizeChange =(val)=> {
  // 更新每页展示数据size
  pageSize.value = val;
  loadData();

}
// @current-change页码点击事件
const handleCurrentChange =(val)=> {
  // 更新当前页数是第几页
  currentPage.value = val;
  loadData();
}
//分页请求方法
const loadData=()=>{
  axios.get(BASE_URL+'/verification/picture?pageSize='+pageSize.value+'&currentPage='+currentPage.value).then((response)=>{
    if(response.data.code==2001){
      HomeArr.value=response.data.data.list;
      totalPage.value=response.data.data.total;
      console.log(HomeArr.value);
    }
  })
}

//删除函数,分页删除,怎么删除卡片
const del=(id,url)=>{

  if (confirm('你确定删除这个图片吗？')){

    let data=qs.stringify({id:id,houseImg:url});
    axios.post(BASE_URL+'/verification/delete',data)
    .then((response)=>{
      if (response.data.code==2001){
        ElMessage.success('删除成功！');
        loadData();
      }else {
        ElMessage.error(response.data.msg);
      }
    })


  }
}
</script>

<style scoped>

</style>